import React,{Component} from 'react';
import styles from './style.less';
import {ScrollBoard} from '@jiaminghi/data-view-react'
import { Empty } from 'antd';

class Index extends Component{
    constructor(props) {
        super(props);
        this.state = {
        
        
        };
      }
      componentDidUpdate(nextProps,nextState){
        if(this.props!=nextProps){
            this.deviceInit();
        }
    }
      deviceInit=()=>{
        let device = deviceDetails(this.props.latestTenWarning)
        this.setState({
            config:{
                header: ['告警时间', '告警设备','告警类型'],
                data: device,
                columnWidth: [160],
                align: ['center'], 
                evenRowBGC:['0A2732'],
                oddRowBGC:['0A2732'],
                rowNum:[6],
            }
        })
    }
    render(){
        return(
            <div className={styles.div_body}>
                <div className={styles.div_body_title}>
                    <h3>最近告警数据</h3>
                </div>
                <div className={styles.div_body_connect}>
                    {
                        this.props.latestTenWarning.length<=0 ?(
                            <>
                                <Empty style={{color:'white'}}/>
                            </>
                        ):(
                            <ScrollBoard  config={this.state.config} style={{width: '25vw', height: '48vh'}} />
                        )
                    }
                </div>
            </div>
        )
    }

}
export default Index;
function deviceDetails(arr=[]){
    let obj = [];
    for(let i=0;i<arr.length;i++){
        let data = ['<span style="color:#37a2da">'+arr[i].warningTime+'</span>','<span style="color:#fb7293;">'+arr[i].vidiconName+'</span>','<span style="color:#ffdb5c;">'+arr[i].warningType+'</span>'];
        obj.push(data);
        
    }
    return obj;
}
